<template>
  <div class="group-friend-add-main">
    <div class="nav-back-header">
      <div class="back-title">
        <div class="back-button">
          <img
            class="back-cover"
            src="@/assets/images/arrow-left.png"
            @click="onNavigationBack()"
          />
        </div>
        <strong>新建自动任务（新群成员自动加）</strong>
      </div>
    </div>
    <div class="add-group-friend-wrap">
      <div class="add-group-friend-content">
        <div class="add-group-friend-filterbox">
          <div class="head">
            <span class="title">排除条件</span>
            <a class="card-option" v-if="isShow" @click="onChangeFilterBox"
              >收起<i
                class="el-icon-arrow-down"
                style="font-weight: 500; font-size: 18px"
            /></a>
            <a class="card-option" v-else @click="onChangeFilterBox"
              >展开<i
                class="el-icon-arrow-up"
                style="font-weight: 500; font-size: 18px"
            /></a>
          </div>
          <div class="filter-wrap" v-show="isShow">
            <div class="filter-title">排除身份性别</div>
            <div class="checks mt-10 mb-30">
              <el-checkbox-group v-model="filter.identity">
                <el-checkbox
                  :label="item.id"
                  v-for="(item, index) in identityList"
                  :key="index"
                >
                  <span class="check-item">{{ item.name }}</span>
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="input-filter">
              <!-- <div class="n-keyword">
                <span>排除添加次数</span>
                <div>
                  <el-input v-model="filter.count" size="small" placeholder="不限" style="width: 160px;" />
                  <span> 次及以上</span>
                </div>
              </div>
              <div class="n-keyword">
                <span>排除上次添加时间</span>
                <div>
                  <el-select v-model="filter.date" placeholder="请选择" style="width: 140px;">
                    <el-option v-for="item in dates" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </div> -->
              <div class="n-keyword">
                <span>
                  昵称关键词
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="昵称包含关键词即被剔除"
                    placement="top-start"
                  >
                    <svg-icon
                      icon-class="iquestion"
                      class-name="c_888999 f-15"
                    />
                  </el-tooltip>
                </span>
                <div>
                  <!-- <el-input
                    v-model="keyword1"
                    placeholder="可输入多个，按Enter确认"
                    size="small"
                    style="width: 290px"
                    @keyup.enter.native="handleAdd('keyword1','nickTags')"
                  />
                  <div class="flex flexwrap">
                    <el-tag
                      v-for="tag in form.nickTags"
                      :key="tag"
                      type="info"
                      closable
                      class="mr-5 mb-5"
                      @close="handleClose('nickTags',index)"
                    >
                      {{ tag }}
                    </el-tag>
                  </div> -->
                  <AddKeyword v-model="filter.nickTags" placeholder="可输入多个，按Enter确认" class="mt-13" />
                </div>
              </div>
              <div class="n-keyword">
                <span>
                  企业名称关键词
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="企业名称包含关键词即被剔除"
                    placement="top-start"
                  >
                    <svg-icon
                      icon-class="iquestion"
                      class-name="c_888999 f-15"
                    />
                  </el-tooltip>
                </span>
                <div>
                  <AddKeyword v-model="filter.qynickTags" placeholder="可输入多个，按Enter确认" class="mt-13" />
                  <!-- <el-input
                    v-model="keyword2"
                    size="small"
                    placeholder="可输入多个，按Enter确认"
                    style="width: 290px"
                    @keyup.enter.native="handleAdd('keyword2','qynickTags')"
                  />
                  <div class="flex flexwrap">
                    <el-tag
                      v-for="tag in form.qynickTags"
                      :key="tag"
                      type="info"
                      closable
                      class="mr-5 mb-5"
                      @close="handleClose('qynickTags',index)"
                    >
                      {{ tag }}
                    </el-tag>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="add-group-friend-message">
          <div class="item-label">验证消息：</div>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="50"
            show-word-limit
          >
          </el-input>
        </div>
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">基本设置</div>
          </div>
          <div class="card-content">
            <el-form
              ref="form"
              :model="form"
              label-width="120px"
              class="add-group-auto-friend-form"
              label-position="left"
            >
              <el-form-item label="任务标题：">
                <el-input
                  type="text"
                  placeholder="请输入任务标题，最长15个字"
                  v-model="form.title"
                  maxlength="15"
                  show-word-limit
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="触发规则：">
                <div class="flex-rows">
                  入群
                  <input-number v-model="form.mini" :max='180' width='80px' style="margin: 0 8px"/>
                  <!-- <el-input
                    v-model="form.mini"
                    size="small"
                    style="width: 66px; margin: 0 8px"
                  /> -->
                  分钟之后，自动添加好友
                </div>
              </el-form-item>
              <el-form-item label="目标群：">
                <el-button
                  plain
                  icon="el-icon-plus"
                  size="small"
                  @click="isShowVisible = true"
                  >选择客户群</el-button
                >
                <div class="check">
                  <el-checkbox v-model="form.check" />
                  <span>新群自动加入（新建5分钟后自动加入该方案）</span>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <!-- <SelectCustomerDialog
      :visible="isShowVisible"
      @handCloseDialog="onHandClosetDialog"
    /> -->
    <div class="add-group-friend-footer">
      <el-button size="small" type="primary" @click="handleSubmit">确定创建任务</el-button>
      <el-button size="small">取消创建</el-button>
    </div>

    <SelectClientGroup 
      v-if="isShowVisible"
      width='1000px'
      height='600px'
      :visable.sync='isShowVisible' 
      title="选择目标客户群"
      isTable
      :lableType='2'
       />
  </div>
</template>
<script>
import SelectCustomerDialog from "../components/selectCustomerDialog";
import SelectClientGroup from '@/components/UserGroupComp/SelectClientGroup'
import AddKeyword from "@/components/AddKeyword/index2.vue";
export default {
  data() {
    return {
      filter: {
        identity: [],
        nickTags:[],
        qynickTags:[],
      },
      identityList: [
        { id: 1, name: "群主" },
        { id: 2, name: "群管理员" },
        { id: 3, name: "企微成员" },
        { id: 4, name: "黑名单" },
        { id: 5, name: "白名单" },
        { id: 6, name: "男性" },
        { id: 7, name: "女性" },
        { id: 8, name: "未知性别" },
      ],
      nickTags:['123','123123123'],
      keyword1:'',
      keyword2:'',
      isShow: true,
      drawerVisible: false,
      textarea: "",
      form: {
        title: "",
        qynickTags:[],
        nickTags:[]
      },
      isShowVisible: false,
    };
  },
  components: {
    SelectCustomerDialog,
    SelectClientGroup,
    AddKeyword
  },
  methods: {
    onNavigationBack() {
      this.$router.go(-1);
    },

    handleAdd(keyword,tags){
      if(!this[keyword])return
      if(this.form[tags].includes(this[keyword])){
        this.$message.warning('标签重复')
        return
      }
      this.form[tags].push(this[keyword])
        this[keyword] = ''
    },

    handleSubmit(){
      console.log(this.form)
    },

    handleClose(tag,index){
      this.form[tag].splice(index,1)
    },

    onChangeFilterBox() {
      this.isShow = !this.isShow;
    },
    onSearchGroup() {
      this.drawerVisible = !this.drawerVisible;
    },
    onHandClosetDialog() {
      this.isShowVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.group-friend-add-main {
  height: calc(100vh - 48px);
  overflow: auto;
  flex: 1 1;
  position: relative;

  .nav-back-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 8;
    height: 46px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;

    .back-title {
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 22px;

      .back-button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin-right: 12px;
        border: none;
        width: 24px;
        height: 24px;
        background: #4b5a95;
        border-radius: 12px;
        cursor: pointer;

        .back-cover {
          width: 16px;
          height: 16px;
        }
      }
    }
  }

  .add-group-friend-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 20px 20px 100px;

    .add-group-friend-content {
      display: flex;
      flex-direction: column;
      width: 1200px;

      .add-group-friend-filterbox {
        background-color: #fff;
        margin-bottom: 16px;
        border-radius: 4px;

        .head {
          display: flex;
          justify-content: space-between;
          padding: 12px 16px;

          .title {
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            font-size: 16px;
          }

          .card-option {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #3070ff;
          }
        }

        .filter-wrap {
          padding: 0 16px 10px;

          .filter-title {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.45);
            margin-bottom: 5px;
          }

          .check-item {
            font-size: 14px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
          }

          .input-filter {
            display: flex;

            .n-keyword {
              margin-right: 32px;

              span {
                color: rgba(0, 0, 0, 0.45);
                font-size: 12px;
              }

              div {
                margin-top: 8px;
              }
            }
          }
        }
      }
    }

    .add-group-friend-message {
      background-color: #fff;
      margin-bottom: 16px;
      border-radius: 4px;
      padding: 12px;
      display: flex;

      .item-label {
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        white-space: nowrap;
        text-align: right;
        padding-top: 4px;
        width: 70px;
      }
    }

    .config-settig-card {
      background: #ffffff;
      margin-top: 12px;
      flex: 1 1;
      text-align: left;
      text-align: initial;
      color: rgba(0, 0, 0, 0.85);
      border-radius: 4px;
      background: #fff;
      font-size: 14px;
      overflow: hidden;
      overflow-y: scroll;

      .card-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e9e9e9;

        .card-title {
          padding: 16px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.85);
        }

        .tips {
          color: rgba(0, 0, 0, 0.45);
          font-size: 14px;
          line-height: 22px;
          padding: 16px;

          a {
            color: #3070ff;
            text-decoration: none;
          }
        }
      }

      .card-content {
        font-size: 14px;
        line-height: 22px;
        display: flex;
        .add-group-auto-friend-form {
          padding: 16px;
          .flex-rows {
            display: flex;
            align-items: center;
          }
          .check {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
            color: rgba(0, 0, 0, 0.65);
            font-size: 14px;
          }
        }
      }
    }
  }
  .add-group-friend-footer {
    position: fixed;
    left: 226px;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 12px 16px;
    display: flex;
    align-content: center;
    justify-content: center;
  }
}
</style>